<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
		<script>
			
			function clickBtn(){
				
				// alert("按钮被点击")
				
				
				//获取元素
				let h3 = document.getElementsByTagName('h3')[0]
				
				// 操作元素
				h3.style.color = 'red';
				
				
				
			}
			
			function changeStyle(div){
				
				
				// 操作元素
				div.style.backgroundColor = 'red';
			}
				
				
			function removeDivStyle(div){
				
				
				// 操作元素
				div.style.backgroundColor = 'white';
			}
				
				
			function changeInput(input){
				input.style.color = 'red';
			}
			
		</script>
	
		
	</head>
	<body>
		<h3>请打开浏览器控制台，观察结果</h3>
				
		<button onclick="clickBtn()">可以点击</button>
		
		
		<div
			onclick="changeStyle(this)"
			onmouseover="changeStyle(this)"
			onmouseout="removeDivStyle(this)"
		    style="width: 100px;height: 100px;cursor: pointer;border: solid 1px red;">					
		</div>
		
		<input type="text"  onfocus="changeInput(this)"    value="admin">
		
		
		
	
	</body>
</html>